<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li {
            /* display: inline; */
            background: red;
            list-style: none;
        }
    </style>
</head>

<body>
    <h2>浏览器组成部分</h2>
    <div style="display: flex">
        <ul>
            <li>shell------内核(渲染rendering引擎)/JS引擎</li>
            <li>Google Chrome-------------webkit/blink</li>
            <li>Safari-------------webkit</li>
            <li>firefox-----------gecko</li>
            <li>IE-----------trident</li>
            <li>opera---------------presto</li>
        </ul>
        <ul>
            <li>内核(渲染rendering引擎)/JS引擎</li>
            <li>webkit/blink</li>
            <li>webkit</li>
            <li>gecko</li>
            <li>trident</li>
            <li>presto</li>
        </ul>
    </div>
    <h2>CSS（cascading style sheet）:层叠样式表</h2>
    <p>
        id>class|属性>标签>*（通配符）
    </p>
    <h3>css权重</h3>
    <p>*------------0</p>
    <p>标签，伪元素------------1</p>
    <p>class、属性、伪类------------10</p>
    <p>id------------100</p>
    <p>内联样式------------1000</p>
    <p>!important------------无穷大</p>
    <h4>计算是256进制，所以之前差距是很大的</h4>
    <h4>计算机中：正无穷&lt;正无穷+1</h4>
    <hr />
    <h3>并列选择器</h3>
    <p>
        class="box box1"---> .box.box1{}
    </p>
    <h3>子选择器</h3>
    <p>
        h1 > div
    </p>
    <h3>应用场景</h3>
    <p>button或者提示框不同的类型(如success/warning/danger)，显示不同的颜色或样式</p>
    <hr />
    <h3>伪类选择器</h3>
    <p>比较多单独做一个文件吧</p>
    <hr />
    <h3>选择器中用+input[type="checkbox"]:checkout + label</h3>
    <p>选择的是同父级，相邻，在其后的label标签</p>



    <h3>命名规则</h3>
    <p>class="btn-success class用中划线</p>
    <p>id="btn_success id用下划线</p>
    <hr />

    <h3>当行内元素代码跨行时，会显示一个空格</h3>
    <ul>
        <li>
            <span>111</span>
            <span>2222</span>
        </li>
        <li>22222</li>
        <li>33333</li>
        <li>44444</li>
    </ul>
    <p>代码会打包所以不能用margin-left:-6px解决</p>
    <p>不能用font-size解决。不符合代码规范</p>
    <p>只能是把代码空格删除，或者加一层盒子</p>
    <p>textarea不能是换行，空格会进入value中</p>
    <textarea cols="30" rows="10">
        二恶烷群群无
    </textarea>
    <hr />

    <h3>font-style</h3>
    <p>font-style:italic(倾斜的字)</p>
    <p>font-style:oblique(让字体倾斜)</p>
    <hr />
    <h3>em(表示强调的内容)</h3>
    <hr />

    <h3>三角形绘制：宽高设置为0；四个边框，其中三个设置border-color:transition（透明）</h3>
    <hr />
    <h3>文本缩进</h3>
    <p>text-indent:2em(em默认是16px。我们平时会html设置成font-size:62.5%，这样em变成10px，开发时方便计算)</p>
    <hr />
    <h3>filter滤镜</h3>
    <p>和透明度有很大的区别</p>
    <p>模糊度</p>
    <p>暗和亮程度</p>
    <p>对比度</p>
    <p>阴影效果(对比box-shadow，有些浏览器为了更好的性能会提供硬件加速)</p>
    <p>把图像转化为灰度对象</p>
    <p>色相旋转</p>
    <p>透明度(对比opacity，有些浏览器为了更好的性能会提供硬件加速)</p>
    <p>图像饱和度</p>
    <p>转化为深褐色</p>
    <p>设置SVG滤镜</p>
    <p>initial默认</p>
    <p>inherit从父元素继承</p>
    <hr />
    <h3>容器内多行文本垂直居中</h3>
    <p>1、将容器的dispaly设置成table</p>
    <p>2、将容器内的文本的dispaly设置成table-cell</p>
    <p>3、将容器内的文本的vertical-align设置问middle</p>
    <hr />

</html>
</body>

</html>